<!-- toaster directive -->
<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
<!-- / toaster directive -->

<!-- 导航条 -->
<div class="bg-white bread-crumb">
    <ul class="breadcrumb b-a m-b-n-xs lter b-b wrapper-md">
        <li><a ui-sref="main.tpl.homePage"><i class="fa fa-home"></i> 首页</a></li>
        <li><a ui-sref="main.sys.menu.list">菜单管理</a></li>
        <li class="active" ng-bind="title"></li>
    </ul>
</div>
<script>
	function menuTypeOnBlur() {
		var menuType = $("#menuType").val();
		if (menuType == 2) {
			$("#sjMenu").show();
		} else {
			$("#sjMenu").hide();
		}
	}
</script>
<!-- 内容区域 -->
<div class="wrapper-md content">
    <div class="panel panel-default">
        <!-- 头部 -->
        <div class="panel-heading font-bold">{{title}}
        <a class="btn btn-sm btn-icon btn-rounded btn-default pull-right m-t-n-xs" ui-sref="main.sys.menu.list"><i class="text-md fa fa-times text-muted"></i></a>
        </div>
        <!--表单-->
            <div class="panel-body">
                <form class="form-horizontal"  name="user_form">
                    <div class="form-group">
                        <label class="col-lg-2 col-sm-3 control-label" for="menuName">
                        <span class="text-danger wrapper-sm">*</span>菜单名称</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="menuName" id="menuName" placeholder="请输入菜单名称..." ng-model="record.menuName">
                        </div>
                    </div>
                    <div class="line line-dashed b-b line-lg pull-in"></div>
                    <div class="form-group">
                        <label class="col-lg-2 col-sm-3 control-label" for="menuType">菜单类型</label>
                        <div class="col-sm-6">
	                        <select class="form-control" ng-model="record.menuType" id="menuType" onchange="menuTypeOnBlur()">
	                        	<option value ="">--请选择--</option>
	                        	<option value ="1">一级菜单</option>
	                        	<option value ="2">二级菜单</option>
	                        </select>
                            <div class="selects"></div>
                        </div>
                    </div>
                    <div class="line line-dashed b-b line-lg pull-in"></div>
                    <div class="form-group">
                        <label class="col-lg-2 col-sm-3 control-label" for="request">
                        <span class="text-danger wrapper-sm">*</span>菜单地址</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="request" id="request" placeholder="请输入菜单地址..." ng-model="record.request">
                        </div>
                    </div>

                    <div class="form-group" style="display: none">
                        <label class="col-lg-2 col-sm-3 control-label" for="request">
                            <span class="text-danger wrapper-sm">*</span>节点图标</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="iconcls" ng-click="show();" id="iconcls" placeholder="请输入节点图标..." ng-model="record.iconcls">
                            <!--<select class="form-control" ng-model="record.iconcls"  ng-options="sysRole.url as sysRole.name for sysRole in sites" id="iconcls" >-->
                            <!--</select>-->
                        </div>

                    </div>

                    <div class="line line-dashed b-b line-lg pull-in"></div>
                    <div class="form-group">
                        <label class="col-lg-2 col-sm-3 control-label" for="request">
                            <span class="text-danger wrapper-sm">*</span>节点图标</label>
                        <div class="col-sm-6">
                            <span  ng-click="show();"><span id="clickMe" ng-show="record.iconcls==null" style="color: red">点我选择节点图标</span><i style="top: 12px;cursor: pointer;font-size:20px;" class="{{record.iconcls}}" ng-model="record.iconcls" ></i></span>
                        </div>
                    </div>
                    <div class="line line-dashed b-b line-lg pull-in"></div>

                    <div class="form-group">
                        <label class="col-lg-2 col-sm-3 control-label" for="request">
                            <span class="text-danger wrapper-sm">*</span>权限标识</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="permission" id="permission" placeholder="请输入权限标识..." ng-model="record.permission">
                        </div>
                    </div>
                    <div class="line line-dashed b-b line-lg pull-in"></div>

                    <div id="sjMenu">
	                    <div class="form-group" >
	                        <label class="col-lg-2 col-sm-3 control-label" for="parentId">上级菜单</label>
	                        <div class="col-sm-6">
	                        
		                        <select class="form-control" ng-model="record.parentId" 
		                             	ng-options="d.id as d.menuName for d in parentList" id="parentId">
		                        </select>
	                            <div class="selects"></div>
	                        </div>
	                    </div>
	                    <div class="line line-dashed b-b line-lg pull-in"></div>
                    </div>
                    <!--搞一个弹框来选择图标-->
                    <div class="cover" ng-show="firstApply">
                        <div class="firstApplyWrap noselect">
                            <div class="clear"><i class="iconfont closeBtn noselect" ng-click="firstApply=false">&#xe608;</i></div>
                            <div class="title">
	           			<span ng-repeat="item in sites track by $index" height="600" width="300">
                            <span class="{{item.name}}" ng-click="get(item.name)"></span>
	           			</span>
                            </div>
                        </div>
                    </div>
                    
                    <!--btn-->
                    <div class="form-group">
                        <div class="col-sm-6 col-sm-offset-2">
                            <button type="reset" class="btn btn-default w-xs">取消</button>
                            <button type="submit" class="btn btn-info w-xs m-l-xl" ng-disabled="isDisabled">保存</button>
                        </div>
                    </div>


                </form>
            </div>
    </div>
</div>

<style>
    .cover {
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 2000;
        top: 0;
        left: 0;
        /* display: none; */
    }

    .firstApplyWrap{
        width: 550px;
        height:400px;
        background: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        border-radius: 5px;
        overflow: hidden;
    }
    .firstApplyWrap .title{
        font-size: 32px;
        color:#333;
        padding:18px 86px 0 130px;
        text-align: center;
        line-height: 2em;
    }
    .firstApplyWrap .closeBtn,.finishData .closeBtn{
        font-size: 30px;
        padding:5px 20px 0 0;
        border-radius: 50%;
        color: #ccc;
        float: right;
        cursor: pointer;
    }
    .finishData .closeBtn{
        position: absolute;
        top:10px;
        right:10px;
    }
    .firstApplyWrap .bkgIcon{
        position: absolute;
        left: 54px;
        top:87px;
        font-size: 50px;
        color:#FFB136;
    }
    .firstApplyWrap .applyBtnWrap{
        position: absolute;
        bottom: -2px;
        width: 100%;
    }
    .firstApplyWrap .applyBtn{
        width: 50%;
        height:70px;
        line-height: 70px;
        background: #FFB135;
        font-size: 20px;
        text-align: center;
        color:#fff;
        cursor: pointer;
        float:left;
    }
    .firstApplyWrap .applyBtn:last-child{
        background: #5796FC;
    }


    .switch{
        display:none;
    }
    .switchlabel{
        position:relative;
        display: block;
        padding: 1px;
        border-radius: 24px;
        height: 22px;
        margin-bottom: 15px;
        background-color: #eee;
        cursor: pointer;
        vertical-align: top;
        -webkit-user-select: none;
    }
    .switchlabel:before{
        content: '';
        display: block;
        border-radius: 24px;
        height: 22px;
        background-color: #BFBFBF;
        -webkit-transform: scale(1, 1);
        -webkit-transition: all 0.3s ease;
    }
    .switchlabel:after{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -11px;
        margin-left: -11px;
        width: 22px;
        height: 22px;
        border-radius: 22px;
        background-color: white;
        box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
        -webkit-transform: translateX(-9px);
        -webkit-transition: all 0.3s ease;
    }
    .switch:checked~label:after{
        -webkit-transform: translateX(9px);
    }
    .switch:checked~label:before{
        background-color:green;
    }
</style>
